<!DOCTYPE html>
<html lang="en">
	<head>
	
    <title>CBE BPE Toolkit - Acoustics Analysis</title>

	<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/anytime/css/anytimec.css"/>
    <link rel="stylesheet" type="text/css" href="/static/jquery-ui/css/smoothness/jquery-ui-1.8.16.custom.css"/>
    <link rel="stylesheet" type="text/css" href="/static/pmp/css/plot.css"/>
    <style type="text/css">
      body {
        padding-top: 55px;
        padding-bottom: 30px;
      }
      .sidebar-nav {
        padding: 5px 0;
      }
    </style>
    
    <script type="text/javascript" src="/static/jquery-1.7.2/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/static/jquery-ui/js/jquery-ui-1.8.20.custom.min.js"></script>
    <script type="text/javascript" src="/static/jquery-form/jquery.form.js"></script>
    <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/jsTree/jquery.jstree.js"></script>
    <script type="text/javascript" src="/static/flot-0.7/js/date.js"></script>
	<script type="text/javascript" src="/static/anytime/js/anytimec.js"></script>
	<script type="text/javascript" src="/static/anytime/js/anytimetz.js"></script>
	<script type="text/javascript" src="/static/pmp/js/acoustics_analysis.js"></script>
    <script type="text/javascript" src="/static/jquery-blockUI/jquery.blockUI.js"></script>
    <script type="text/javascript" src="/static/pmp/js/pmputil.js"></script>
    <script type="text/javascript" src="/static/sessvars/sessvars.js"></script>
    <script type="text/javascript" src="/static/highcharts/js/v3/highcharts.js"></script>
    <script type="text/javascript" src="/static/highcharts/js/v3/highcharts-more.js"></script>
    <script type="text/javascript" src="/static/highcharts/js/modules/exporting.js"></script>
    <script src="http://www.openlayers.org/api/2.11/OpenLayers.js" type="text/javascript"></script>
    <script type="text/javascript" src="/static/olwidget/js/olwidget.js"></script>
    <link rel="stylesheet" type="text/css" href="http://openlayers.org/api/2.11/theme/default/style.css">
    <link rel="stylesheet" media="all" type="text/css" href="/static/olwidget/css/olwidget.css">
    <script type="text/javascript" src="/static/canvg/js/rgbcolor.js"></script> 
	<script type="text/javascript" src="/static/canvg/js/canvg.js"></script>
	
	<script>
		$(document).ready(function(){
			$("li#" + window.location.pathname.substring(5, window.location.pathname.length - 1)).addClass("active") 	
		    $('select#id_name').change(function() { 
	    		var projectId = $(this).val();
	    		sessvars.sessionObj['projectId'] = projectId;
	    		plotInit(true);
				projectName = $(this).find("option:selected").text();
				analysisRadio(projectName);
	    	})
	    	$('select#ansiSelect').change(function() { 
	    		if ($('#analysisRadio1').is(':checked')){
		    		if ($('#ctRadioMap').is(':checked')){analysisPlot()}
		    		else{ansiLimits()}
		    	}
	    	})
	    	$('select#resample_select').change(function() {
	    		if ($(this).val() != 'custom'){
	    			$('#resampleTime').attr('disabled','disabled')
	    			$('#resampleTime').val($(this).val())
	    		}
	    		else{
	    			$('#resampleTime').removeAttr('disabled')
	    		}
	    	});
	    	$('#startDate').click(function() {
	    		$('#btnGrp1').button('reset');
	    	});
	    	$('#endDate').click(function() {
	    		$('#btnGrp1').button('reset');
	    	});
	    	$('#avgDay').click(function() {
	    		if ($('#avgDay').is(':checked')){
		    		document.getElementById('resample_select').options[1].selected = true; 
		    		$('#resampleTime').val(document.getElementById('resample_select').options[1].value);
		    		$('#resampleTime').attr('disabled','disabled')
		    		$('#resample_select').attr('disabled','disabled')
	    		}
	    		else{
	    			$('#resampleTime').removeAttr('disabled')
		    		$('#resample_select').removeAttr('disabled')
	    		}
	    	});
	    	$( "#boxplotChart" ).dialog({ autoOpen: false, height: 550, width: 700 });
	    	$('#chartImageCheck').click(function(){
	    		if ($(this).is(':checked')){
	    			$('#chartImageSave').show()
					$.ajax({
						type: "GET",
						url: '/pmp/utils/',
						data: {'utilType': 'chart_image', 'map':is_map},
						success: function(data){
							$('#chartImageSave').html(data)
							$('#chartImageSave').show()
						}
					});
	    		}
	    		else { $('#chartImageSave').hide(); }
	    	});
	    	$('#chartImage').hide();
		})
		$(".collapse").collapse()
		$('.nav-tabs').button()
		
	</script>
  </head>

  <body>
	{% include 'header.html' %}
        <div class="span10" id="mainContent">
        	<h3><img src="/static/pmp/img/ac_solid_50.png" height="38" width="40">&nbsp;&nbsp;Acoustics analysis <a target="_blank" href="/static/doc/_build/html/lighting_ac_iaq.html"><i class="icon-info-sign" style="margin-top: 5px"></i></a></h3>
        	<div class="row">
            <div class="span8">
            <div class="accordion-group">
              <div class="accordion-heading">
                <a style="font-size: 12px; font-weight: bold" class="accordion-toggle" data-toggle="collapse" href="#collapseAnalysis">
                  <!--<span style="vertical-align: middle" class="caret"></span>&nbsp;-->Select Analysis Type 
                </a>
              </div>
              <div id="collapseAnalysis" class="accordion-body collapse in">
                <div class="accordion-inner">
                 <div class="controls">
		              <label class="radio">
		                <input type="radio" name="analysisRadio" id="analysisRadio1" value="option1" onclick="analysisRadio();" checked>
		                Whole test period analysis
		              </label>
		              <!--<label class="radio">
		                <input type="radio" name="analysisRadio" id="analysisRadio2" value="option2" onclick="analysisRadio();">
		                Time series/slices analysis (best for long term measurements)
		              </label>-->
		              <label class="radio">
		                <input type="radio" name="analysisRadio" id="analysisRadio3" value="option3" onclick="analysisRadio();">
		                Acoustics performance summary model
		              </label>
		              <div id="analysisOptions"></div>  
		              <div id="analysisOptionsIEQ">
		      			{% include 'ieqModelInline.html' %}
		              </div>
		              <div id="analysisOptionsFlr">
		              	{% include 'floorInline.html' %}
		              </div>
		          </div>
                </div>
              </div>
             </div>
             <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" href="#collapseTemporal" style="font-size: 12px; font-weight: bold">
                  Temporal Filtering
                </a>
              </div>
              <div id="collapseTemporal" class="accordion-body collapse in">
                <div class="accordion-inner">
	                <h6>Define date/time range:</h6>	
						<p style="font: 10px sans-serif">
							<input type="text" id="startDate" class="input-medium">&nbsp;Start date&nbsp;
				        	<input type="text" id="endDate" class="input-medium">&nbsp;End date&nbsp;
			        	</p>
						<div class="btn-toolbar">
							<div class="btn-group">
						        <input type="button" onclick="javascript: setEndNow(true); $('#btnGrp1').button('reset');" value="Recent" class="btn btn-small">
		        				<input type="button" onclick="javascript: setEndNow(false); $('#btnGrp1').button('reset');" value="Now" class="btn btn-small">
						        <input type="button" onclick="javascript: plotInit(true);" value="Reset" class="btn btn-small">
					        </div>
					        <div class="btn-group" data-toggle="buttons-radio" id='btnGrp1'>
						        <input type="button" onclick="javascript: changeDates('hour');" value="Hour" id="hrbtn" class="btn btn-small">
						        <input type="button" onclick="javascript: changeDates('day');" value="Day" id="dybtn" class="btn btn-small">
						        <input type="button" onclick="javascript: changeDates('week');" value="Week" id="wkbtn" class="btn btn-small">
						        <input type="button" onclick="javascript: changeDates('month');" value="Month" id="mnthbtn" class="btn btn-small">
					        </div>
				        <!--<input type="checkbox" id="autoupdate" onchange="javascript: null;">&nbsp;Autoupdate</input>-->
				        </div>
		        	<div class="controls" id="hooDiv">
		        		<h6>Define hours of operation</h6>
			    		<label class="checkbox"><input type="checkbox" id="alldays" onclick="allDays();" checked="true">All days/times</label>
		    			<label class="checkbox"><input type="checkbox" id="wkdays" onclick="wkDays();">Weekdays only</label>
		        		<input type="text" id="startHour" class="input-mini" value="06" disabled="true"><font style="font: 10px sans-serif">&nbsp;Start hour</font>
		        		<input type="text" id="endHour" class="input-mini" value="18" disabled="true"><font style="font: 10px sans-serif">&nbsp;End hour</font>
		        		<script>
			    			$("#startHour").AnyTime_picker( { format: "%H", labelTitle: "Start hour",labelHour: "Hour"} );
	    					$("#endHour").AnyTime_picker( { format: "%H", labelTitle: "End hour",labelHour: "Hour"} );
			    		</script>
		    		</div>
                </div>
              </div>
            </div>
            <div class="accordion-group">
              <div class="accordion-heading">
                <a style="font-size: 12px; font-weight: bold" class="accordion-toggle" data-toggle="collapse" href="#collapseStreams">
                  Spatial Filtering
                </a>
              </div>
              <div id="collapseStreams" class="accordion-body collapse">
                <div class="accordion-inner">
                	<div class="controls">
                		<button onclick="javascript: analysisRadio(true)" class="btn btn-mini"><i class="icon-refresh"></i>&nbsp;Refresh tree</button>
            	 	</div>
   					<div id="tree" style="height: 150px; overflow: auto; margin-right: 10px"></div>			   
                </div>
              </div>
           </div>
         <div class="accordion-group" id='smoothGroup'><!-- this div is not currently used, but may be in future-->
              <div class="accordion-heading">
                <a style="font-size: 12px; font-weight: bold" class="accordion-toggle" data-toggle="collapse" href="#collapseSmooth">
                  Resample/Average Data
                </a>
              </div>
              <div id="collapseSmooth" class="accordion-body collapse in">
                <div class="accordion-inner" style="font-size: 12px">
	                <p><small>
	                 	Resampling will slice the selected date/time range into intervals and average over those intervals. For example, a resample
	                 	interval of 3600s will provide hourly averaged data, where the interval averaged starts on the hour.
	                </small></p>
		    			<!--<input type="checkbox" id="resample" checked="yes" onclick="enableTextInput();">&nbsp;Resample-->
	    			<p><small>Resample:&nbsp;
	    			<select id='resample_select' class='span2'>
	    				<option value='900'>15 minutes</option>
	    				<option value='3600'>1 hour</option>
	    				<option value='43200'>12 hours</option>
	    				<option value='86400'>1 day</option>
	    				<option value='604800'>1 week</option>
	    				<option value='18144000'>1 month</option>
	   					<option value='custom'>Custom</option>
	    			</select>&nbsp;=&nbsp;
	    			<input type="text" id="resampleTime" disabled="true" class="input-small" value="900">&nbsp;seconds</small></p>
    				<div class="controls">
    					<label class="checkbox"><input type="checkbox" id="avgDay">Provide an average day (requires a time period longer than 1 day)</label>
					</div>
                </div>
              </div>
           </div>
           <div class="row">
	    	<div class="form-inline span3" style="padding-top: 5px; padding-bottom: 5px">
	    		<button onclick="advanceTime(false);" class="btn btn-small"><i class="icon-step-backward"></i></button>
		        <input type="submit" class="btn btn-small" id="plotbutton" value="Plot" onclick="analysisPlot();">
		        <button onclick="advanceTime(true);" class="btn btn-small"><i class="icon-step-forward"></i></button>&nbsp;
	    	</div>
    		<div id="ansi" class="span5" align="right">
    			<label style="padding-right: 50px">Select a Recommended Sound Level</label>
            	<select id='ansiSelect' class="span4">
            		<optgroup label="Space type: Ideal (Maximum) dB(A)"></optgroup>
            		<option value="0,0">-------------------- None --------------------------</option>
            		<optgroup label="Outdoor Ambient">
            			<option value="40,50">Intrusion from transportation vehicle noise: 40 (50)</option>	
            		</optgroup>
            		<optgroup label="Offices">
            			<option value="35,45">Open Office Plan - with sound masking: 35 (45)</option>
            			<option value="35,40">Open Office Plan - without sound masking: 35 (40)</option>
            			<option value="30,40">Private office: 30 (40)</option>
            			<option value="30,40">Conference room - meeting: 30 (40)</option>
            			<option value="25,30">Conference room - video conference: 25 (30)</option>
            			<option value="40,50">Lobby/Reception/Corridor: 40 (50)</option>
            		</optgroup>
            		<optgroup label="Educational Spaces (Classrooms)">
            			<option value="35,45">Classrooms: 35 (45)</option>
            			<option value="35,45">Large lecture rooms with speech amplication: 35 (45)</option>
            			<option value="30,40">Large lecture rooms without speech amplication: 30 (40)</option>	
            		</optgroup>
            		<optgroup label="Libraries">
            			<option value="35,45">Library: 35 (45)</option>
            		</optgroup>
            	</select>
    		</div><!--/span5-->
    	</div><!--/row-->
	 	</div><!--/span8-->
        </div><!--/row-->
	    <div class="row">
	    	<div id='chartContainer' class="span8">
	    		<div id="chart"></div><!--/chart div-->
	    		<div id="boxplotChart" style="width:750;height:450px;"></div>
	    		<div id="chartImage">
	    			<label class="checkbox"><input type="checkbox" id="chartImageCheck">Save chart image to database for detailed report helper</label>
	    			<div id="chartImageSave"></div>
	    		</div>
         	</div><!--/span-->    
            <div class="span3" id="legend"></div>
        </div><!--/row--> 
        </div><!--/span10-->
      </div><!--/row-->
      <hr>
	{% include 'footer.html' %}

    </div><!--/.fluid-container-->


<script>
	//var data = [[[-5],[-10],[10],[2],[1],[20],[30]],[[-5],[-10],[10],[2],[1],[20],[30]],[[-5],[-10],[10],[2],[1],[4],[5]]]
	//$.plot("#chart", data, {series:{boxplot:{show: true}}});
	if (typeof sessvars.sessionObj == 'undefined'){sessvars.sessionObj = {'projectId': $('select#id_name').find("option:selected").val()};}
	if (typeof sessvars.sessionObj != 'undefined'){
		if (sessvars.sessionObj['projectId'] == ""){sessvars.sessionObj['projectId'] = $('select#id_name').find("option:selected").val();}
		else {
			for (var i=0;i<document.getElementById('id_name').options.length;i++) {
				if (document.getElementById('id_name').options[i].value == sessvars.sessionObj['projectId'])
					{document.getElementById('id_name').options[i].selected = true;}
			}
		}
	}
	var projectName = $("#id_name option:selected").text();
	plotInit();
	$("#chart").resize()
	analysisRadio();
</script>
</body></html>